export default {
  data() {
    return {
      isResizing: false,
      startX: 0,
      startWidth: 0,
      animationFrame: null
    }
  },
  methods: {
    startResize(e) {
      this.isResizing = true
      this.startX = e.clientX
      this.startWidth = this.$refs.header.offsetWidth
      window.addEventListener('mousemove', this.handleResize)
      window.addEventListener('mouseup', this.stopResize)
    },
    handleResize(e) {
      if (!this.isResizing) return
      
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame)
      }
      
      this.animationFrame = requestAnimationFrame(() => {
        const dx = e.clientX - this.startX
        const newWidth = this.startWidth + dx
        const clampedWidth = Math.max(160, Math.min(newWidth, window.innerWidth * 0.25))
        this.$refs.header.style.width = `${clampedWidth}px`
        this.$refs.header.style.transition = 'none'
      })
    },
    stopResize() {
      this.isResizing = false
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame)
      }
      this.$refs.header.style.transition = 'width 0.2s ease'
      window.removeEventListener('mousemove', this.handleResize)
      window.removeEventListener('mouseup', this.stopResize)
    }
  },
  beforeDestroy() {
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame)
    }
    window.removeEventListener('mousemove', this.handleResize)
    window.removeEventListener('mouseup', this.stopResize)
  }
}
